<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=<?php echo $this->userLanguage ?>"></script>
<script type="text/javascript" src="application/modules/Gmapsprofile/externals/scripts/markerclusterer_compiled.js"></script>
<script type="text/javascript">
window.addEvent("load", function(){
if ($$('.layout_gmapsprofile_places_friends').getStyle('display') == 'none') {
  $$('li.tab_layout_gmapsprofile_places_friends').addEvent('click', function(){
      if (!is_load_friends) {
		if ($('map_canvas_friends') != null) {
			var r = new Request({
			    url: prefix+'gmapsprofile/friends/jsondata',
				method: 'post',
			    onSuccess: function(responseText){
				data = JSON.decode(responseText);
				initialize_friends();
		        }
			});
		 	r.send('subject=<?php echo $this->user->getIdentity() ?>');
		}  	
		is_load_friends = true;
	  }	
  });
}  
});
</script>
<ul>
  <li>
	<div id="map_canvas_friends"></div>
  </li>
</ul>

<script type="text/javascript">
  var is_load_friends=false;
  var data;
  
  var prefix = '';
  function mrrOff() {
	addres = window.location.href;
    if (addres.split("index.php").length > 1)    
	  prefix = 'index.php/';
  }
  mrrOff();
  
  function initialize_friends() {
	var infoBubble = new google.maps.InfoWindow();
	function makeBubbleHandler(marker, user_id, map){

	  google.maps.event.addListener(marker, 'click', function(){
		var request_info = new Request({
		    url: prefix+'gmapsprofile/friends/content',
			method: 'get',
    		onRequest: function(event, xhr){
			infoBubble.open(map, marker);
		      var iwOpt = {
		        content: '<?php echo $this->translate("Loading...") ?>'
		      }		
	  		  infoBubble.setOptions(iwOpt);
		    },			
		    onSuccess: function(responseText){
		      var iwOptions = {
		        content: responseText
		      }
		      infoBubble.setOptions(iwOptions);
   	     }
		});
		request_info.send('id='+user_id+'&subject=<?php echo $this->user->getIdentity() ?>');  	
	  });
	} 
	   $('map_canvas_friends').set('style', 'width:'+$('map_canvas_friends').offsetWidth+'px');
	   $('map_canvas_friends').set('style', 'height:'+$('map_canvas_friends').offsetWidth*0.8+'px');

        var center = new google.maps.LatLng(55.3780510, -3.4359730);
		var latLng;
        var gmap = new google.maps.Map(document.getElementById('map_canvas_friends'), {
          zoom: <?php echo $this->scale ?>,
          center: center,
          mapTypeId: google.maps.MapTypeId.<?php echo $this->map_type ?>
        });

		bounds = new google.maps.LatLngBounds();
        var markers = [];
		var infowindows = [];
		var dataMembers = null;
        for (var i = 0; i < data.count; i++) {
          var dataMembers = data.members[i];
          latLng = new google.maps.LatLng(dataMembers.latitude, dataMembers.longitude);
			
		  bounds.extend(latLng);

          var marker = new google.maps.Marker({
            position: latLng,
			map: null,
			icon: 'http://www.google.com/mapfiles/markerF.png',
          });
		  makeBubbleHandler(marker, dataMembers.user_id, gmap);  
          markers.push(marker);		  
        }
        
		if (data.count > 0) {
		  var mcOptions = {maxZoom: 17};
		  var markerCluster = new MarkerClusterer(gmap, markers, mcOptions);
		  gmap.fitBounds(bounds);
		}
	    if (data.count <= 0) { gmap.setCenter(center); gmap.setZoom(2); }
}

window.addEvent('domready', function() {
if ($$('.layout_gmapsprofile_places_friends').getStyle('display') == 'block')
	if ($('map_canvas_friends') != null) {
		var r = new Request({
		    url: prefix+'gmapsprofile/friends/jsondata',
			method: 'post',
		    onSuccess: function(responseText){
			data = JSON.decode(responseText);
			initialize_friends();
	        }
		});
	 	r.send('subject=<?php echo $this->user->getIdentity() ?>');
	}  	
});

  var loadInfo = function(user, page, subject) {
	$('info').tween('opacity', 0.3);
	$('gmap_loading').set('style', 'visibility:visible');

    var request = new Request({
      url: prefix+'gmapsprofile/friends/content',
	  method: 'get',
      onComplete: function(responseText) {
		$('content_info').set('html', responseText);
		$('gmap_loading').set('style', 'visibility:hidden');
      }
    });
   request.send('id='+user+'&page='+page+'&subject='+subject);
  }
</script>
